<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<!DOCTYPE html>
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg no-smil svgclippaths">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>XToolsCRM- easy to Power</title>
		<link href="css/tocss/bootstrap-datepicker3.min.css" rel="stylesheet">
		<link href="../css/zcss/switchery.min.css" rel="stylesheet">
		<link href="../css/zcss/bootstrap-clockpicker.min.css" rel="stylesheet">
		<link href="../css/zcss/bootstrap-table.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/bootstrap-select.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/core.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/components.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/icons.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/pages.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/responsive.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/sweetalert.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/custombox.min.css" rel="stylesheet">
		<link href="../css/zcss/animate.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/css.css" rel="stylesheet" type="text/css">

		<link href="../css/zcss/bootstrap-datepicker3.min.css" rel="stylesheet">
		<link href="../css/zcss/switchery.min.css" rel="stylesheet">
		<link href="../css/zcss/bootstrap-clockpicker.min.css" rel="stylesheet">
		<link href="../css/zcss/bootstrap-table.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/bootstrap-select.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/core.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/components.css" rel="stylesheet" type="text/css">

		<!--图标的外部样式-->
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css" rel="stylesheet" type="text/css">
		<!--图标的外部样式-->

		<link href="../css/zcss/pages.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/responsive.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/sweetalert.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/custombox.min.css" rel="stylesheet">
		<link href="../css/zcss/animate.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/css.css" rel="stylesheet" type="text/css">

		<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>

		<style>
			.el-dropdown-link {
				cursor: pointer;
				color: #000;
			}
			
			.types:hover {
				border: 1px solid #000;
			}
			
			.el-icon--right {
				float: right;
				line-height: 40px;
			}
			
			.el-icon-arrow-down {
				font-size: 12px;
			}
		</style>
	</head>

	<body class="fixed-left modal-open" style="padding-right: 16px; overflow: auto;" onload=";">

		<div class="createOrderbox" style="width: 800px; height: 1098.62px; margin: 0 auto;" id="createOrderbox">
			<div id="popshowcont">
				<div id="gedit">
					<div id="editgedit" style="position: absolute; display: none; &amp; amp; amp; #9; left: 0; &amp; amp; amp; #9; top: 0; width: 0; &amp; amp; amp; #9; height: 0; z-index: 100; background-color: #D4D0C8;">
						<iframe name="editsubgedit" src="/a.html" scrolling="no" style="width: 0; height: 0; border: 0;"></iframe>
					</div>
					<form name="formedit_gedit" class="form-horizontal" action="/system/editok.xt" enctype="multipart/form-data" method="POST" target="editsubgedit" novalidate="" autocomplete="off">
						<input name="mdb" type="hidden" value="800c327aefb3f9241513cbf551abbfda"><input name="comname" type="hidden" value="gedit"><input name="db" type="hidden" value="contract"><input name="retjava" type="hidden" value="b7gsTKoUGZph2X0lGZld2Xkx2biVnLw9GdgsTKoUGdhRGc1JGZu92XrNWasN2X0lGZldmLw9Gd"><input name="type" type="hidden" value="insert"><input name="dt_contract_id" type="hidden" value=""><input name="dt_contract_viewtype" type="hidden" value="1"><input name="dt_contract_money_type" type="hidden" value=""><input name="dt_contract_money_rate" type="hidden" value=""><input name="dt_contract_bl_flag" type="hidden" value=""><input name="dt_contract_prj_id" type="hidden" value="0"><input name="dt_contract__prj_id" type="hidden" value="">
						<div class="portlet form-horizontal border-n">
							<div class="portlet-heading portlet-default">

								<div class="pull-right  f-s-12">

									<!--<span class="button_close_qshow"><button type="button" class="btn btn-white waves-effect waves-light" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close m-r-5"></i>关闭</button></span>-->
									<div class="btn-save">
										<input name="B0" class=" m-l-5 btn btn-white  waves-effect waves-light" style="padding-left: 30px" onclick="if($('input[name=dt_contract_date]').val() < '2018-12-28'){if(confirm('日期早于今天，本单是否为过去操作的补单？')){$('input[name=dt_contract_bl_flag]').val(1);}else{$('input[name=dt_contract_bl_flag]').val(0);}}if ( $('input[name=dt_contract_cu_id]').val()>0) {vopen_blank('/sys/sms/loadsms.html','actruncontract');orderWinID=OWinID;}" type="submit" value="保存" set-lan="value:保存">
									</div>
								</div>

								<h4 class="modal-title text-dark">
								<span set-lan="html:订单">订单</span>

							</h4>
								<hr class="border-t-a">

							</div>
							<div class="gedit_scroll_content">
								<div class="panel-collapse collapse in" id="bg-default">
									<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" style="padding-left: 25px;">

										<!--客户-->
										<el-row :gutter="20">
											<el-col :span="4">
												<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">选择客户:</div>
											</el-col>
											<el-col :span="16" style="height: 45px; margin-bottom: 20;">
												<el-form-item prop="costomers">
													<el-input v-model="ruleForm.costomers" :span="16" placeholder=" " disabled></el-input>
												</el-form-item>
											</el-col>
										</el-row>

										<!--客户查询-->
										<el-row :gutter="20">
											<!--<el-col :span="6" style="margin-left: 133px; margin-right: 0px;">
												<el-input v-model="ruleForm.costomersfind" :span="16" placeholder="请输入内容"></el-input>
											</el-col>-->

											<!--客户查询-->
											<el-col :span="6" style="margin-left: 133px; margin-right: 0px;">
												<el-autocomplete class="inline-input" v-model="ruleForm.costomersfind" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect">
													<template slot-scope="{ item }">
														<div class="name">{{ item.cus_name }}({{ item.cus_id }})</div>
													</template>
												</el-autocomplete>
											</el-col>
											<!--客户查询-->

											<el-col :span="2" style="margin-left: 0;padding-left: 0;width:44px;height: 32px;">
												<el-button size="small" icon="el-icon-search" style="margin-top: 5px;"></el-button>
											</el-col>
											<el-col :span="2" style="margin-left: 0;padding-left: 0;margin-left: 5px;">
												<el-button size="small" icon="el-icon-more" style="margin-top: 5px; margin-left: 0;"></el-button>
											</el-col>
										</el-row>
										<br />

										<!--选择订单-->
										<el-row :gutter="20">

											<!--选择订单-->
											<el-col :span="4">
												<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">订单:</div>
											</el-col>
											<el-col :span="6">

												<el-form-item prop="order">
												<el-select v-model="ruleForm.order" placeholder="请选择" style="width: 420px;" @change="orderOk">
													<el-option v-for="item in oderitem" :key="item.o_id" :label="item.otitle" :value="item.o_id"> </el-option>
												</el-select>
												</el-form-item>

											</el-col>
										</el-row>
										<br />

										<!--选择商品-->
										<el-row :gutter="20">

											<!--选择商品-->
											<el-col :span="4">
												<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">商品:</div>
											</el-col>
											<el-col :span="7">

												<el-form-item prop="goods">
													<el-select v-model="ruleForm.goods" placeholder="请选择" style="width: 420px;" @change="numBermax">
														<el-option v-for="item in goodsitem" :key="item.goo_id" :label="item.goo_name" :value="item.goo_id">
														</el-option>
													</el-select>
												</el-form-item>

											</el-col>

										</el-row>
										<br />
										
										<!--选择员工-->
										<el-row :gutter="20">

											<!--选择员工-->
											<el-col :span="4">
												<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">退货负责人:</div>
											</el-col>
											<el-col :span="7">

												<el-form-item prop="users">
													<el-select v-model="ruleForm.users" placeholder="请选择" style="width: 420px;" >
														<el-option
     													 v-for="item in usersitem"
     													 :key="item.useid"
      													 :label="item.name"
      													 :value="item.useid">
    													</el-option></el-option>
													</el-select>
												</el-form-item>

											</el-col>

										</el-row>
										<br />

										<!--数量-->
										<el-row :gutter="20">
											<!--数量-->
											<el-col :span="4">
												<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">退货数量:</div>
											</el-col>
											<el-col :span="6" style="width: 220px;">
												
												<el-form-item prop="quatity">
												<el-input v-model.number="ruleForm.quatity" :span="16" type="number" style="width: 420px;" @change="numberChange" ></el-input>
											
												</el-form-item>
												
											</el-col>

										</el-row>
										<br />

										<!--日期-->
										<el-row :gutter="20">

											<!--退货日期-->
											<el-col :span="4">
												<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">退货日期:</div>
											</el-col>
											<el-col :span="6">
												<!--<el-input v-model="orderid" :span="16" placeholder="请输入内容"></el-input>-->
												<el-form-item prop="havetime">
													<el-date-picker v-model="ruleForm.havetime" type="date" placeholder="选择日期">
													</el-date-picker>
												</el-form-item>
											</el-col>

										</el-row>
										
										<!--退货原因-->
										<el-row :gutter="20">
											<el-col :span="4">
												<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">退货原因:</div>
											</el-col>
											<el-col :span="15">
												<el-input type="textarea" :autosize="{ minRows: 8, maxRows: 14}" placeholder="请输入内容" v-model="ruleForm.doback" style="width: 510px;">
												</el-input>
											</el-col>
										</el-row>
										<br />

										<!--备注-->
										<el-row :gutter="20">
											<el-col :span="4">
												<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">备注:</div>
											</el-col>
											<el-col :span="15">
												<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="ruleForm.desc" style="width: 510px;margin: 0 auto;">
												</el-input>
											</el-col>
										</el-row>
										<!--备注-->

								</div>
								<div class="text-right p-20">

									<!--<span class="button_close_qshow"><button type="button" class="btn btn-white waves-effect waves-light" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close m-r-5"></i>关闭</button></span>-->
									<div class="btn-save">
										<input name="B0" class=" m-l-5 btn btn-white  waves-effect waves-light" style="padding-left: 30px" @click="submitForm('ruleForm')" type="button" value="保存" set-lan="value:保存">
									</div>
								</div>

								<!-- <p v-for="(stu,i) in ruleForm.restaurants">
							{{stu.cus_name}}
							</p> -->
								<!-- {{ruleForm.restaurants}}  -->

								</el-form>
							</div>
							<!-- 这里是字典表的一些东西 -->

							<!-- 这里是字典表的一些东西 -->
					</form>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			// var woshilist=document.getElementById('dictionarys').value;

			var vm = new Vue({
				el: ".createOrderbox",
				data: {
					customertoman: [],
					oderitem: [],
					goodsitem: [],
					usersitem:[],
					restaurants:[],
					ruleForm: {
						/*客户*/
						costomers: "",
						costomersfind: "",
						custid: "",
						/*订单*/
						order: "",
						orderid: "",
						/*商品*/
						goods:"",
						gid:"",
						/*退货负责人*/
						users:"",
						/*数量*/
						quatity:"",
						/*退货时间*/
						havetime: "",
						/*退货原因*/
						doback: "",
						/*备注*/
						desc: "",
						max:0

					},
					rules: {
						
						costomers: [{
							required: true,
							message: '请选择一个客户',
							trigger: 'change'
						}],
						order: [{
							required: true,
							message: '请选择订单',
							trigger: 'change'
						}],
						goods: [{
							required: true,
							message: '请选择商品',
							trigger: 'change'
						}],
						users: [{
							required: true,
							message: '请选择负责人',
							trigger: 'change'
						}],
						havetime: [
							//数据类型要是date
							{
								type: 'date',
								required: true,
								message: '请选择日期',
								trigger: 'change'
							}
						],
						quatity: [{
							type: 'number',
							required: true,
							message: '请输入正确退货数量',
							trigger: 'blur'
						}]
					}

				},
				methods: {
					
					submitForm(formName) {
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/addTuihuo",
									//参数转换
									Qs.stringify(this.ruleForm, {
										arrayFormat: 'brackets'
									})

								).then(function(v) {
									window.parent.location.href = "/getBackgx";
								}).catch(function(e) {
									alert("出错了" + e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},

					handleSelect(item) {
						console.log(item);
						this.ruleForm.costomersfind = item.cus_name;
						this.ruleForm.costomers = item.cus_name;
						this.ruleForm.custid = item.cus_id;
						
						this.ruleForm.order="";
						this.ruleForm.goods="";
						this.ruleForm.quatity=0;
						this.ruleForm.max=0;

						this.oderitem=[];
						this.goodsitem=[];
						//访问拿到对应联系人
						var iosnn = this;

						//post提交数据
						axios.post("/onSale/findByCoustomerNameAndOrder",
							//参数转换
							Qs.stringify(this.ruleForm, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							iosnn.oppitem = v.data.opp;
							iosnn.customertoman = v.data.custo;
							iosnn.oderitem=v.data.order;
							console.info(v.data);
						}).catch(function(e) {
							alert("出错了" + e);
						});

						//var cc=${dictionaryitem};
						//console.log(cc); 
					},
					querySearch(queryString, cb) {
						var allarr = this.restaurants;
						// console.info(allarr);

						var newsarr = [];
						allarr.forEach(v => {
							var strs = v.cus_name + "";
							if(strs.indexOf(queryString) >= 0) {
								newsarr.push(v);
								console.info(strs);
								console.info(v);
							}
						})
						// 调用 callback 返回建议列表的数据
						cb(newsarr);
					},
					orderOk(selVal){
						//alert(selVal);
						this.ruleForm.orderid =selVal;
						
						var iosnn = this;
						//获取了订单id 根据订单id查询商品信息
						this.ruleForm.goods="";
						this.ruleForm.quatity=0;
						this.ruleForm.max=0;
						this.goodsitem=[];
						//post提交数据
						axios.post("/onSale/findByCoustomerNameAndOrderS",
							//参数转换
							Qs.stringify({'oid':selVal}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							if (v.data.goodsitem!=null) {
								iosnn.goodsitem=v.data.goodsitem;
							}
							
							console.info(v.data.goodsitem);
						}).catch(function(e) {
							alert("出错了" + e);
						});
					},
					numBermax(gid){
						this.ruleForm.gid =gid;
						this.ruleForm.max=0;
						//alert("ss"+maxs);
						//找到对应商品的最大值
						var dds = this;
						//alert(dds.ruleForm.orderid);
						//post提交数据
						axios.post("/onSale/findByReturnMax",
							//参数转换
							Qs.stringify({'oid':dds.ruleForm.orderid,'gid':gid}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							dds.ruleForm.max=v.data.goodsmax;
							console.info(v.data.goodsmax);
						}).catch(function(e) {
							alert("出错了" + e);
						});
						//alert("ss"+max);
					},
					numberChange(){
						//alert(this.ruleForm.quatity+"--"+max);
						if (this.ruleForm.quatity>this.ruleForm.max||this.ruleForm.quatity<=0) {
							this.ruleForm.quatity=this.ruleForm.max;
						}
					}

				},
				mounted() {
					var mas=${mansitem};
					this.restaurants = mas;
					console.log(this.ruleForm.restaurants); 
					/* alert(this.ruleForm.restaurants.cus_name); */

					var ss=${userJson};
					console.log(ss); 
					this.usersitem=ss;
				}

			});
		</script>
	</body>
	<!--UTF8-->

</html>